<!--@author vidy3587@gmail.com-->
<template>
  <div class="with-banner-padding ">
    <div class="publish-header publish-header-rank publish-container">
      <div class="header-container">
        <div class="rank-content rank-badge-top">
          <div class="rank-badge">
            <img class="mic" src="~@/assets/mic.png" alt="">
            {{ detail.ticketNum }} 话筒
          </div>
        </div>
      </div>
    </div>
    <div class="with-line-bg has-bottom-out">
      <div class="with-repeat-bg ">
        <div class="rank-content">
          <div class="row summary-row">
            <div class="summary-card vertical-middle horizontal-middle">
              <div class="summary-value flex vertical-middle horizontal-middle">{{ detail.taskTicketNum }}</div>
              <div class="summary-description flex vertical-middle horizontal-middle">任务话筒</div>
            </div>
            <div class="summary-card  vertical-middle horizontal-middle">
              <div class="summary-value flex vertical-middle horizontal-middle">{{ detail.giveTicketNum }}</div>
              <div class="summary-description flex vertical-middle horizontal-middle">赠送话筒</div>
            </div>
            <div class="summary-card  vertical-middle horizontal-middle">
              <div class="summary-value flex vertical-middle horizontal-middle">{{ detail.collectTicketNum }}</div>
              <div class="summary-description flex vertical-middle horizontal-middle">邀新话筒</div>
            </div>
          </div>
          <div class="player-profile flex horizontal-middle">
            <div class="player-info row">
              <div class="player-no col-1">
                {{ detail.number }}号
              </div>
              <div class="player-rank">
                第<span class="rank">{{ detail.rank }}</span>名
              </div>
            </div>
            <img :src="detail.headImgUrl" class="player-photo" alt="player-photo">
            <div class="player-name text-center">
              {{ detail.nickName }}
              <!--            Lion Messi-->
            </div>
          </div>
          <div class="video-container" @mouseover="showPlayButton">
            <video @pause="onPause" @playing="isPlaying=true"
                   ref="player" :src="detail.workVideoUrl"></video>
            <div v-if="isPlayButtonShow" class="video-button" @click="playVideo()">
            </div>
          </div>
          <div class="comment-box">
            {{ detail.profile }}
            <!--          拉票宣言【50字以内】拉票宣言【50字以内】-->
            <!--          拉票宣言【50字以内】!!-->
          </div>
          <button class="btn large primary-btn block btn-mgn btn-bold">
            帮TA做任务获取话筒
          </button>
          <button @click="giveTicket(detail)"
                  class="btn large ghost-btn block btn-mgn
          btn-bold">
            赠送话筒
          </button>
        </div>
      </div>
    </div>
    <Modal :loading="isGiving" v-model="isModalShow">

      <div v-if="!isGiving">
        <div v-if="isGivingFailed">
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/smile_face.png" alt="">
          </div>
          <div class="modal-content">
            话筒已送完，明天再来
            支持TA吧！
          </div>
        </div>
        <div v-else>
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/success.png" alt="">
          </div>
          <div class="modal-content">
            赠送成功！
          </div>
        </div>
      </div>
    </Modal>

  </div>

</template>

<script>

import {getDmDetail} from "@/api/dm";
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
import {giveTicket} from "@/api/shortVideo";
import Modal from "@/core/components/Modal";
import {evBus, updateDmEv} from "@/pages/evBus";

export default {
  components: {
    Modal
  },
  name: "HostDetail",
  data() {
    return {
      isGivingFailed: false,
      isGiving: false,
      /**@type {DmDetail}*/
      isPlayButtonShow: true,
      isPlaying: false,
      isModalShow: false,
      detail: {
        // "number": 0,//编号
        // "nickName": "0号",//名称
        // "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",//头像
        // "workVideoUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",//作品视频
        // "profile":"我是主持人",//拉票宣言
        // "taskTicketNum": 100,//任务话筒数
        // "giveTicketNum": 100,//赠送话筒数
        // "collectTicketNum": 100,//召集话筒数
        // "ticketNum": 300//话筒数
      }
    }
  },
  mounted() {
    /**@type {HTMLVideoElement} */
    const video = this.$refs.player;
    console.log('video is ', video);
    getDmDetail(this.$route.params.queryParams).then(
        res => this.detail = res.data
    );
  },
  // destroyed () {
  //   setTimeout(() => {
  //     evBus.$emit(updateDmEv, this.detail);
  //   },300);
  // },
  // deactivated() {
  //   setTimeout(() => {
  //     evBus.$emit(updateDmEv, this.detail);
  //   },300);
  // },
  methods: {
    playVideo() {
      /**@type {HTMLVideoElement} */
      const video = this.$refs.player;
      if (this.isPlaying) {
        video.pause();
      } else {
        this.isPlaying = true;

        console.log('video is ', video);
        video.play();
      }

      this.hidePlayButton();
      // this.$refs.player.

    },
    hidePlayButton(ev) {
      console.log("hidePlayButton", ev);
      this.isPlayButtonShow = false;
    },
    showPlayButton(ev) {
      console.log("showPlayButton", ev);

      this.isPlayButtonShow = true;
    },
    onPause() {
      this.isPlaying = false;
    },
    /**
     * @param {DmItem} item
     */
    async giveTicket(item) {
      this.isModalShow = true;
      this.isGiving = true;
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      try {
        const res = await giveTicket({workNumber: item.number, userId: userInfo.id});
        console.log("res.status", res.status);
        this.isGivingFailed = res.status === 1;
      } catch (e) {
        this.isGivingFailed = true;
      } finally {
        this.isGiving = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.with-banner-padding {
  padding-bottom: 0;
}

.title-bar {
  display: inline-flex;
  min-width: px2rem(100px);
  padding: 0 px2rem(30px);
  height: px2rem(65px);
  font-size: px2rem(36px);
  margin-top: px2rem(48px);
  background-color: $warmColor;
  color: $warmBGFontColor;
  border-top-right-radius: px2rem(20px);
  border: px2rem(1px) solid $warmBGFontColor;
  font-weight: bold;
  align-items: center;
  justify-content: center;
}

.rank-content {
  width: px2rem(532px);
  margin-left: px2rem(52px + 65px);
  padding-bottom: 2px;
}

.mic {
  width: px2rem(32px);
  height: px2rem(37px);
  margin-right: px2rem(15px);
}

.summary-row {
  padding-top: px2rem(30px);
  justify-content: space-between;
}

.summary-card {
  display: flex;
  flex-direction: column;
  width: px2rem(162px);
  height: px2rem(102px);
  border: px2rem(1px) solid $warmColor;
  border-radius: px2rem(10px);
}

.summary-value {
  color: $lightWarmColor;
  font-weight: bold;
  font-size: px2rem(40px);
}

.summary-description {
  color: $warmColor;
  font-size: px2rem(28px);
}

.player-photo {
  margin: 0 auto;
  width: px2rem(306px);
  height: px2rem(306px);
  background-color: $warmColor;
  border-radius: px2rem(5px);
  object-fit: cover;
}

.player-info {
  margin: px2rem(22px) auto px2rem(16px) auto;
  width: px2rem(306px);
  justify-content: space-around;
  color: $lightFontColor;
  font-size: px2rem(24px);

  .rank {
    color: $lightWarmColor;
  }
}

.player-profile {
  flex-direction: column;
}

.player-name {
  margin-top: px2rem(17px);
  font-size: px2rem(24px);
  color: $lightFontColor;
}

.video-container {
  position: relative;
  width: px2rem(541px);
  height: px2rem(292px);
  margin-top: px2rem(17px);
  border-radius: px2rem(5px);
  overflow: hidden;
  background-color: #000;

  video {
    width: px2rem(541px);
    height: px2rem(292px);
  }
}

.video-button {
  position: absolute;
  @include withBg("~@/assets/video_play.png", px2rem(81px) px2rem(81px), center cente);
  //background-image: url("~@/assets/video_play.png") no-repeat center center;
  background-size: px2rem(81px) px2rem(81px);
  width: px2rem(81px);
  height: px2rem(81px);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(px2rem(-81px/2), px2rem(-81px/2));
}

.comment-box {
  position: relative;
  margin-top: px2rem(28px);
  box-sizing: border-box;
  width: px2rem(541px);
  min-height: px2rem(169px);
  background-color: #0027D2;
  border: px2rem(1px) solid #000;
  border-radius: px2rem(10px);
  color: $lightFontColor;
  font-size: px2rem(24px);
  padding: px2rem(48px) px2rem(11px) px2rem(55px) px2rem(34px);

  &:before {
    display: block;
    position: absolute;
    content: "";
    background: url("~@/assets/light.png") no-repeat center center;
    background-size: px2rem(63px) px2rem(61px);
    width: px2rem(63px);
    height: px2rem(61px);
    left: px2rem(16px);
    top: px2rem(-18px);
  }

  &:after {
    display: block;
    position: absolute;
    content: "";
    background: url("~@/assets/comment.png") no-repeat center center;
    background-size: px2rem(51px) px2rem(45px);
    width: px2rem(51px);
    height: px2rem(45px);
    right: px2rem(15px);
    bottom: px2rem(16px);
  }
}

.btn-mgn {
  margin-top: px2rem(25px);
}

.task-card {
  display: flex;
  flex-direction: row;
  width: px2rem(542px);
  box-sizing: border-box;
  min-height: px2rem(220px);
  padding: px2rem(37px) px2rem(16px) 0 px2rem(16px);
  background: #fff;
  box-shadow: 0 px2rem(8px) px2rem(32px) 0 rgba(0, 0, 0, 0.08);
  border-radius: px2rem(10px);
  margin-bottom: px2rem(18px);
}

.task-title {
  font-size: px2rem(22.8px);
  color: #000;
  line-height: px2rem(22.8px);
}

.task-pic {
  width: px2rem(109.4px);
  height: px2rem(143.8px);
  border-radius: px2rem(10px);
  background-color: $warmColor;
  border: none;
  overflow: hidden;
  margin-right: px2rem(16.6px);
}

.task-list {
  margin: 0 px2rem(-9px) 0 px2rem(-28px);
  padding: 0 px2rem(9px) 0 px2rem(28px);
  margin-top: px2rem(7px);
  background-color: #1b58e4;
}

.task-tag {
  font-size: px2rem(18.24px);
  color: #333;
  line-height: px2rem(18.24px);
  padding: 0 px2rem(6.2px);
  border-right: px2rem(1px) solid #ebebeb;
}

.task-info-row {
  margin-top: px2rem(10px);
}

.task-tag-list {

}

.vote-player-info {
  //background-color: #1b58e4;
  padding: px2rem(48px) px2rem(9px) 0 px2rem(28px);

}

.btn.block {
  width: px2rem(542px);
}

.task-avatar {
  position: relative;
  margin-top: px2rem(72px - 37px);
  width: px2rem(110px);
  height: px2rem(110px);
  background: $warmColor;
  border-radius: 50%;

  .avatar {
    width: px2rem(110px);
    height: px2rem(110px);
    border-radius: 50%;
    overflow: hidden;
  }

  .task-sex {
    display: inline-block;
    bottom: 0;
    right: 0;
    position: absolute;
    width: px2rem(29px);
    height: px2rem(29px);
    background: #FFAF11;
    border-radius: 50%;
  }
}


.address-icon {
  width: px2rem(19px);
  height: px2rem(17px);
}

.with-line-bg {
  padding-bottom: px2rem(44px);
  @include withBg("~@/assets/line.png", px2rem(966px), px2rem(1355px), left, px2rem(298px));

  .with-repeat-bg {
    @include withBg("~@/assets/vote_zone_bg.png", px2rem(690px), px2rem(590px), center, px2rem(-300px), repeat-y);
    //min-height: 2000px;
  }

}


.modal-image {
  width: 100%;
  text-align: center;
  margin-top: px2rem(152px);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: px2rem(29px);
}

.modal-content {
  font-size: px2rem(36px);
  color: #F2E630;
  letter-spacing: 0;
  text-align: center;
  width: px2rem(360px);
  margin: 0 auto;
}

.smile-face {
  width: px2rem(432px);
  height: px2rem(152px);
}
</style>
